<template>
  <div class="task-detail">
    <HeaderBar title="任务详情" rightIcon="ellipsis" @back="goBack" @right="showMenu = true" />
    <div class="card">
      <div class="title">{{ task.title }}</div>
      <div class="desc">{{ task.content }}</div>
      <div v-if="task.images && task.images.length" class="img-list">
        <img v-for="(img, i) in task.images" :key="i" :src="img" class="img" />
      </div>
      <div class="time">发布时间：{{ task.time }}</div>
    </div>
    <div class="phone-row">
      <span>电话号码</span>
      <span class="phone">{{ task.phone }}</span>
    </div>
    <div class="btns">
      <van-button type="primary" class="btn-comm" @click="onChat">立即沟通</van-button>
    </div>
    <div class="task-footer">
      <img :src="task.avatar || `https://api.multiavatar.com/${task.author || 'user'}.svg`" class="avatar" />
      <span class="author">{{ task.author }}</span>
      <span class="time">{{ task.time }}</span>
    </div>
    <van-action-sheet v-model:show="showMenu" :actions="actions" @select="onMenuSelect" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useTaskStore } from '../store/index.js'
import HeaderBar from '../components/HeaderBar.vue'
const router = useRouter()
const route = useRoute()
const store = useTaskStore()
const task = ref(store.tasks.find(t => t.id == route.params.id) || store.tasks[0])
const showMenu = ref(false)
const actions = [
  { name: '管理', key: 'manage' },
  { name: '分享', key: 'share' }
]
function goBack() { router.back() }
function onMenuSelect(action) {
  showMenu.value = false
  if (action.key === 'manage') router.push(`/manage?id=${task.value.id}`)
  if (action.key === 'share') showShare()
}
function onChat() { router.push(`/chat/${task.value.author}`) }
function showShare() {
  // 可在此弹出分享面板或跳转管理页自动弹出分享
  router.push(`/manage?id=${task.value.id}`)
}
</script>
<style scoped>
.task-detail { 
  padding: 0 0 32px 0; 
  background: #fafbfa; 
  min-height: 100vh; 
  width: 100vw;
  box-sizing: border-box;
}
.card { 
  background: #fff; 
  border-radius: 12px; 
  padding: 16px; 
  margin: 8px; 
  margin-bottom: 8px; 
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06); 
}
.title { 
  font-size: 18px; 
  font-weight: 600; 
  margin-bottom: 8px; 
  color: #222;
}
.desc { 
  color: #666; 
  margin-bottom: 8px; 
  line-height: 1.5;
  font-size: 15px;
}
.img-list { 
  display: flex; 
  gap: 8px; 
  margin-bottom: 8px; 
}
.img { 
  width: 80px; 
  height: 80px; 
  border-radius: 8px; 
  object-fit: cover; 
}
.time { 
  color: #999; 
  font-size: 13px; 
}
.phone-row { 
  background: #f8f9fa; 
  border-radius: 8px; 
  padding: 12px 16px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin: 0 8px 20px 8px; 
  font-size: 15px; 
}
.phone { 
  font-weight: 600; 
  color: #222;
}
.btns { 
  display: flex; 
  justify-content: flex-end; 
  gap: 8px; 
  margin: 0 8px; 
}
.btn-comm { 
  flex: 1; 
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 500;
}
.task-footer { 
  display: flex; 
  align-items: center; 
  padding: 12px 16px; 
  background: #f8f9fa;
  border-radius: 8px;
  margin-top: 12px;
}
.avatar { 
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  margin-right: 8px; 
}
.author { 
  font-weight: 600; 
  color: #222;
  margin-right: 8px;
}
.time { 
  color: #999; 
  font-size: 13px; 
}
</style> 